<template>
  <div id="live2d-wrapper" :style="!show?'width:0':''">
    <div class="website-tools">
      <span class="toggle" @click="show=!show">{{show?"隐":"显"}}</span>
      <ColorPicker
        v-model="color"
        defaultColor="#ef7c1e"
        v-on:change="headleChangeColor"
      />
    </div>
    <canvas v-show="show" id="live2d" width="280" height="250"></canvas>
  </div>
</template>

<script>
import ColorPicker from "../ColorPicker";

export default {
  name: "Live2d",
  components: { ColorPicker },
  computed: {},
  data() {
    return {
      show: true,
      color: "#ef7c1e",
    };
  },
  watch: {
    show: function (newVal, oldVal) {
      if(newVal){
        loadlive2d("live2d", this.$withBase("/live2d/model.json"))
      }else{
        loadlive2d("live2d", "")
      }
    }
  },
  mounted() {
    import("./live2d.min.js").then(() => {
      this.live2d = loadlive2d("live2d", this.$withBase("/live2d/model.json"));
    });
    // build 时 navigator is not defined问题
    // https://my.oschina.net/xuedingmiaojun/blog/4641481
    const themeColor = localStorage.getItem("themeColor") || "#ef7c1e";
    if (themeColor) this.headleChangeColor(themeColor);
    this.color = themeColor;
  },
  methods: {
    headleChangeColor(e) {
      const style = document.body.style;
      style.setProperty("--main-color", e);
      localStorage.setItem("themeColor", e);
    },
  },

};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus">
#live2d-wrapper
  position fixed
  left 20px
  bottom 130px
  width 280px
  height 250px
  z-index 9999
  .website-tools
    text-align center
    position absolute
    width:20px
    right 10px
    top 10px
    display flex
    flex-direction column
    .toggle
      cursor pointer
      width 20px
      height 20px
      margin-bottom 5px
      font-size 12px
      line-height 20px
      background var(--main-color)
      color:#fff

</style>
